<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script src="assets/js/jquery.lazyload.min.js"></script>
	<style type="text/css">
		*{ padding:0; margin:0}
		*html{background-image:url(about:blank);background-attachment:fixed;}/*解决IE6下滚动抖动的问题*/
		html,div,ul,li,dl,dt,dd,p,h1,h2,h3,h4,h5,h6,img,form,embed,label{margin:0;padding:0;border:0; font-size:12px; font-weight:normal;}
		ul,ul li{ list-style:none;}
		/*basic*/

		.banner{float: left;width: 100%;}
		.banner .ban1 img{width: 100%;}
		.banner .ban2 img{width: 100%;}
		.banner .ban3 img{width: 100%;}
		.banner .ban4 img{width: 100%;}
		.banner .ban5 img{width: 100%;}
		.banner .ban6 img{width: 100%;}
        .banner .ban7 img{width: 100%;}
        .banner .ban8 img{width: 100%;}
        .banner .ban9 img{width: 100%;}
		img{
			   /* -webkit-animation-name: fadeInOut;
    -webkit-animation-timing-function: ease-in-out;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-duration: 2s;
    -webkit-animation-direction: alternate; */
		}

     .fade-in {
    -webkit-animation: fade-in 1s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
            animation: fade-in 1s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
}

/* ----------------------------------------------
 * Generated by Animista on 2021-11-13 19:18:57
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info.
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation fade-in
 * ----------------------------------------
 */
@-webkit-keyframes fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

		/* 内容区 */
	</style>
</head>
<body>
<!-- banner-stard -->
<div class="banner fade-in">
	<p class="ban1">
		<img  src="images/bt_1/bt_1.jpg" align="absmiddle">
	</p>

</div>

<div class="banner fade-in">
	<p class="ban2">
		<img  src="images/bt_1/bt_2.jpg" align="absmiddle">
	</p>

</div>

<div class="banner fade-in">
	<p class="ban3">
		<img  src="images/bt_1/bt_3.jpg" align="absmiddle">
	</p>

</div>

<div class="banner fade-in">
	<p class="ban4">
		<img  src="images/bt_1/bt_4.jpg" align="absmiddle">
	</p>

</div>

<div class="banner fade-in">
	<p class="ban5">
		<img  src="images/bt_1/bt_5.jpg" align="absmiddle">
	</p>

</div>

<div class="banner fade-in">
	<p class="ban6">
		<img  src="images/bt_1/bt_6.jpg" align="absmiddle">
	</p>

</div>

<div class="banner fade-in">
    <p class="ban6">
        <img  src="images/bt_1/bt_7.jpg" align="absmiddle">
    </p>

</div>

<div class="banner fade-in">
    <p class="ban6">
        <img  src="images/bt_1/bt_8.jpg" align="absmiddle">
    </p>

</div>
<div class="banner fade-in">
    <p class="ban6">
        <img  src="images/bt_1/bt_9.jpg" align="absmiddle">
    </p>

</div>
<!-- banner-end -->
<script type="text/javascript">
     function loadImage(src, callback) {
	var img = new Image();
	//img.onload = callback;
	img.onload=function(){
		img.onload =null;
        callback();
	}
	img.src = src;
	}
</script>

<script type="text/javascript">
(function () {
 var imgList = [], // 页面所有img元素集合
 delay, // setTimeout 对象
 offset, //偏移量，用于指定图片距离可视区域多少距离，进行加载
 time, // 延迟载入时间
 _selector; // 选择器 默认为 .m-lazyload

 function _isShow(el) {
 var coords = el.getBoundingClientRect();
 return ( (coords.top >= 0 && coords.left >= 0 && coords.top) <= (window.innerHeight || document.documentElement.clientHeight) + parseInt(offset));
 }

 function _loadImage() {
 for (var i = imgList.length; i--;) {
  var el = imgList[i];
  if (_isShow(el)) {
  el.src = el.getAttribute('data-src');
  el.className = el.className.replace(new RegExp("(\\s|^)" + _selector.substring(1, _selector.length) + "(\\s|$)"), " ");
  imgList.splice(i, 1);
  }
 }
 }

 function _delay() {
 clearTimeout(delay);
 delay = setTimeout(function () {
  _loadImage();
 }, time);
 }

 function ImageLazyload(selector, options) {
 var defaults = options || {};
 offset = defaults.offset || 0;
 time = defaults.time || 250;
 _selector = selector || '.m-lazyload';
 this.getNode();
 _delay();//避免首次加载未触发touch事件,主动触发一次加载函数
 if (defaults.iScroll) {
  defaults.iScroll.on('scroll', _delay);
  defaults.iScroll.on('scrollEnd', _delay);
 } else {
  window.addEventListener('scroll', _delay, false);
 }
 }
 ImageLazyload.prototype.getNode = function () {
 imgList = [];
 var nodes = document.querySelectorAll(_selector);
 for (var i = 0, l = nodes.length; i < l; i++) {
  imgList.push(nodes[i]);
 }
 };
})();
</script>



</body>
</html>
